<template>
    <div class="Top">
        <slot name="leftPart"></slot><!--左-->
        <slot name="midPart"></slot><!--中-->
        <slot name="search"></slot><!--搜索-->
        <slot name="rightPart"></slot><!--右-->
    </div>
</template>

<script>
    export default {
        name: 'Top',
        data () {
            return {

            }
        },
        props:['dataTop'],
        methods:{
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .Top {
        width: 100%;
        height: .8rem;
        line-height: .8rem;
        background-color: #de6940;
        position: fixed;
        top: 0;
        left: 0;
        color: #fff;
        z-index: 10;
        text-align: center;
        .back{
            font-size: .4rem;
            position: absolute;
            left: .2rem;
            top: calc(50% - .2rem);
        }
        .title{
            text-align: center;
            font-size: .28rem;
            letter-spacing: .01rem;
        }
        .types {
            position: absolute;
            top: .1rem;
            right: 0;
            // display: inline-flex;
            // flex-direction: column;
            // align-items: center;
            // justify-content: center;
            margin-right: .36rem;
            img {
                display: block;
                margin: 0 auto;
                width: .36rem;
                height: .36rem;
            }
            span {
                display: block;
                line-height: normal;
                font-size: .18rem;
                margin-top: .02rem;
            }
        }
        .formbox {
            width: 60%;
            margin-left: .84rem;
            position: relative;
            i {
                position: absolute;
                left: 0;
                top: 0;
                font-size: .3rem;
                &.el-input__icon {
                    width: auto;
                }
            }
        }
        .searchInp{
            width: 100%;
            color: #fff;
            height: .5rem;
            border-radius: 0;        
            background-color: transparent;
            border:0;
            border-bottom: 1px solid #fff; 
            -webkit-appearance : none;
            color: #fff;
            font-size: .24rem;
            padding-left: .4rem;
            outline:none;
            box-sizing: border-box;
            caret-color:white;
            position: relative;
            &::placeholder{
                color: #fff; 
            }
        }
        .history{
            position: absolute;
            right: .2rem;
            top: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            i{
                text-align: center;
                font-size: .34rem;
            }
            span{
                display: inline-block;
                line-height: 1;
                font-size: .16rem;
                margin-top: .02rem;
            }
        }
        .upload-list{
            position: absolute;
            top: 0;
            bottom: 0;
            right: .20rem;
            margin: auto;
        }
        .upload-list, .icon-btn{
            display: flex;
            align-items: center;
        }
        .icon-btn{
            flex-direction: column;
            justify-content: space-between;
            img{
                width: .35rem;
                height: .32rem;
            }
            span{
                margin-top: .06rem;
                font-size: .21rem;
                line-height: 1;
            }
            &:nth-child(2){
                img{
                    width: .37rem;
                    height: .31rem;
                }
            }
        }
    }
</style>
